// ==========================================================================
//   Variables
// ==========================================================================

//   Layout
// ==========================================================================

// Compatibility Circle
$compatibility-circle-size: 50px;

// Home Hero
$hero-height-small: 350px;
$hero-height-medium: 650px;

// Footer
$footer-height: auto;

//   Colors
// ==========================================================================

// OpenFarm core colors
$of-orange: #e69138;
$of-blue:   #3c78d8;
$of-purple: #674ea7;
$of-green:  #6aa84f;
$of-green2: #5e9546;
$of-blue-grey: #eCeff0;
$of-red:    #cc0000;
$of-yellow: #f1c232;
$of-dark:   #4a4a4a;
$of-light:  hsl(0, 0, 87%);


// Grays
$white:           #ffffff;
$gray-bg:         #f9f9f9;
$light-gray:      #cecece;
$gray:            #999999;
$dark-gray:       #666666;
$form-gray:       $light-gray;
$off-black:       #333333;
$black:           $off-black;
$translucent-gray:  rgba(0, 0, 0, .6);
$translucent-black:  rgba(0, 0, 0, .8);

$background-color: rgba($off-black, .075);

// We use these as default colors throughout
$primary-color:   #99b36c; // #008CBA;
$secondary-color: #e7e7e7;
$alert-color:     #ff6666;
$success-color:   #74e29d;
$warning-color:   #f5c18c;
$info-color:      #eecb91;

// OpenFarm Colors
$openfarm-green:       #85cb2b;
$openfarm-green-muted: #99b36c;
$openfarm-blue-grey:   #eceff0;

$compatibility-low-color:  #b23a2c;
$compatibility-medium-color:  #fbad2f;
$compatibility-high-color: #84c93f;
// Same color, just lighter (adjusted to appear perceptually equally lighter)
$compatibility-low-color-bg:  lighten($compatibility-low-color, 45%);
$compatibility-medium-color-bg:  lighten($compatibility-medium-color, 35%);
$compatibility-high-color-bg: lighten($compatibility-high-color, 40%);

//misc colors
$brown: #4d4c4b;
$gray-green: #dadfda;

// semantic colors
$tag-background-color: transparentize($openfarm-green-muted, .8);

$transition-speed: .5s;
